<template>
	<el-row class="container">
	
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
					 unique-opened router :style="{display: collapsed ? 'none' : 'inherit'}">
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
							</li>
						</template>
					</li>
				</ul>
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>

</template>
<script>
	import { logout,identifying,updateSelf } from '@/api/api';
	export default {
		data() {
			return {
				resetPwdmsg: '发送验证码',
				isDisabled: false,
				time: 60,				
				editFormVisible:false,
				sysName:'优足生活',
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
				countdown:'',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				editForm: {
					phone: '',
					password: '',
					code:'',
					   repassword:''
				}

			}
		},
		methods: {

			editSubmit(){
 				var parm =  'phone='+ this.editForm.phone + "&password=" +  this.editForm.password + "&code=" + this.editForm.code


        if(this.editForm.password != this.editForm.repassword ){
                 this.$message({
                message: '两次密码输入不一致！',
                type: 'error'
              });
              return;
        }



				updateSelf(parm).then(datas => {
						let { msg, code, data } = datas;
						if (code !== 1) {
							this.$message({
								message: '修改失败',
								type: 'error'
							});
						} else {
							this.$message({
								message: "修改成功",
								type: 'success'
							})
							this.editFormVisible = false;
						
								this.getADPage();
              			}
            		}).catch((e) =>{
						console.log(e);
					});

			},

			fix(){
				var user = sessionStorage.getItem('user');
				user = JSON.parse(user);
				this.editForm.phone = user.phone;
				this.editFormVisible = true;
			},
			identifying(){
				let me = this;
			     var parm = {
		            'phone':this.editForm.phone
		          }
		          if(this.editForm.phone!=''){
					identifying(parm).then(data =>{
					if (data.code !=1 ) {
						me.$message({
						message: data.msg,
						type: 'error'
						});
						return;
					}else { // 发送验证码成功
						me.isDisabled = true;
						let interval = window.setInterval(function() {
						me.resetPwdmsg =  me.time + ' 秒后重新发送';
						--me.time;
						if(me.time < 0) {
							me.resetPwdmsg = "重新发送";
							me.time = 60;
							me.isDisabled = false;
							window.clearInterval(interval);
						}
						}, 1000);                
					}
					});
				}else{
					this.$message({
						message: '手机不能为空',
						type: 'error'
					});

				}
			},
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				//console.log('handleopen');
			},
			handleclose() {
				//console.log('handleclose');
			},
			handleselect: function (a, b) {
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					logout();
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
				}).catch(() => {
				});
			},
			//折叠导航栏
			collapse:function(){
				this.collapsed=!this.collapsed;
			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			}
		},
		mounted() {
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				this.sysUserAvatar = user.portrait || '';
			}

		}
	}

</script>

<style scoped lang="scss">
</style>